<template>
  <div class="flex align-center justify-end custom_page">
    <span class="total">共{{ pageTotal }}页</span>
    <span class="total">共{{ total }}条</span>
    <button v-if="pageTotal > 1" type="button" class="page_btn" @click="goFirst">首页</button>
    <el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize" :page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    <button v-if="pageTotal > 1" type="button" class="page_btn" @click="goEnd">尾页</button>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize:{
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      page: 1,
      // pageSize: 10,
      pageList: [5, 10, 20, 50, 100]
    }
  },
  computed: {
    pageTotal() {
      const num = Math.ceil(this.total / this.pageSize)
      return num > 0 ? num : 1
    },
    layout() {
      if (this.total === 0) {
        return 'prev, pager, next'
      }
      if (this.pageTotal > 1) {
        return 'sizes, prev, pager, next, jumper'
      }
      return 'sizes, prev, pager, next'
    }
  },
  methods: {
    changePageSize(val) {
      this.pageSize = val
      if (this.pageList.indexOf(val) === -1) {
        this.pageList.unshift(val)
      }
    },
    goEnd() {
      this.page = this.pageTotal
      this.$emit('getList')
    },
    goFirst() {
      this.page = 1
      this.$emit('getList')
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.$emit('getList')
    },
    handleCurrentChange(val) {
      this.page = val
      this.$emit('getList')
    }
  }
}
</script>

<style lang="scss">
.custom_page {
  margin-top: 15px;

  .total {
    margin-right: 10px;
  }

  .page_btn {
    color: #333333;
    background: #ffffff;
    border: 1px solid #eeeeee;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 30px;
    border-radius: 2px;
    height: 28px;
    vertical-align: top;
    cursor: pointer;
  }

  .el-pagination__jump {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
